<template>
  <el-drawer
    :before-close="handleClose"
    :size="600"
    title="填写配血结果"
    :visible.sync="drawerVisible"
  >
    <div class="pd12">
      <el-table border :data="tableData" size="mini" style="width: 100%">
        <el-table-column
          align="center"
          label="配血方式"
          prop="blood_match_type_name"
          width="100"
        />
        <div v-if="+bloodMatchTypePid === 2">
          <el-table-column
            align="center"
            label="凝集程度"
            prop="AGGREGATION_INTENSITY"
            show-overflow-tooltip
          >
            <template #default="scope">
              <el-cascader
                v-model="scope.row.AGGREGATION_INTENSITY"
                clearable
                :options="bloodMatchSideOptions"
                size="mini"
                @change="handleChange(scope.row)"
              />
            </template>
          </el-table-column>
        </div>
        <div v-else>
          <el-table-column
            align="center"
            label="主侧"
            prop="FIRST_RESULT"
            width="120"
          >
            <template #default="scope">
              <el-cascader
                v-model="scope.row.FIRST_RESULT"
                clearable
                :options="bloodMatchSideOptions"
                size="mini"
                @change="handleChange(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="次侧"
            prop="SECOND_RESULT"
            width="120"
          >
            <template #default="scope">
              <el-cascader
                v-model="scope.row.SECOND_RESULT"
                clearable
                :options="bloodMatchSideOptions"
                size="mini"
                @change="handleChange(scope.row)"
              />
            </template>
          </el-table-column>
        </div>
        <el-table-column
          align="center"
          label="直抗"
          prop="AGGREGATION_INTENSITY"
          show-overflow-tooltip
        >
          <template #default="scope">
            <el-cascader
              v-model="scope.row.AGGREGATION_INTENSITY"
              clearable
              :options="bloodMatchSideOptions"
              size="mini"
              @change="handleChange(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" label="配血结果" prop="MATCH_RESULT">
          <template #default="scope">
            <el-select v-model="scope.row.MATCH_RESULT" clearable size="mini">
              <el-option
                v-for="(item, index) in bloodMatchResult"
                :key="+index"
                :label="item"
                :value="item"
              />
            </el-select>
          </template>
        </el-table-column>
      </el-table>
      <div class="h12" />
      <el-button type="primary" @click="submit">提交</el-button>
    </div>
  </el-drawer>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { bloodMatchSideOptions, bloodMatchResult } from '@/utils/constant'
  import { convertArr2Obj } from '@/utils'
  export default {
    props: {
      bloodMatch: {
        type: Object,
        default() {
          return null
        },
      },
    },
    data() {
      return {
        drawerVisible: false,
        direction: 'rtl',
        tableData: [],
        bloodMatchSideOptions,
        bloodMatchResult,
      }
    },
    computed: {
      ...mapGetters({
        bloodMatchTypePid: 'initialData/bloodMatchTypePid',
        bloodMatchTypes: 'initialData/bloodMatchTypes',
        bloodMatchType: 'initialData/bloodMatchType',
      }),
      bloodMatchTypeIds() {
        return this.bloodMatchType.map((val) => val[1])
      },
      bloodMatchTypesObj() {
        const res = convertArr2Obj(
          convertArr2Obj(this.bloodMatchTypes, 'id')[this.bloodMatchTypePid][
            'children'
          ],
          'id'
        )
        return res
      },
    },
    mounted() {
      if (this.bloodMatch && this.bloodMatch.MATCH_SHEET_NUM) {
        this.tableData = this.getTableData()
        this.drawerVisible = true
      }
    },
    methods: {
      handleClose(done) {
        const tableDataFinished = this.tableData.filter((val) => {
          return val.MATCH_RESULT
        })
        if (this.tableData.length !== tableDataFinished.length) {
          this.$confirm('当前配血结果尚未填写完毕，确认关闭？', {
            type: 'warning',
          })
            .then(() => {
              done()
              this.$emit('submit', this.tableData)
            })
            .catch(() => {})
        } else {
          done()
          console.log(this.tableData)
          this.$emit('submit', this.tableData)
        }
      },
      submit() {
        const tableDataFinished = this.tableData.filter((val) => {
          return val.MATCH_RESULT
        })
        if (this.tableData.length !== tableDataFinished.length) {
          this.$message.error('配血信息填写不完整')
          return
        }
        this.drawerVisible = false
        this.$emit('submit', this.tableData)
      },
      getTableData() {
        if (this.bloodMatch.blood_match_types) {
          const bloodMatchTypeIdsOld = this.bloodMatch.blood_match_types.map(
            (val) => val.blood_match_type_id
          )
          const res = []
          this.bloodMatchTypeIds.forEach((item) => {
            if (bloodMatchTypeIdsOld.includes(item)) {
              res.push(
                this.bloodMatch.blood_match_types.filter((val) => {
                  return +val.blood_match_type_id === +item
                })[0]
              )
              res.map((val) => {
                val.FIRST_RESULT = ['无凝集']
                val.SECOND_RESULT = ['无凝集']
                val.MATCH_RESULT = '相合'
              })
            } else {
              res.push({
                MATCH_SHEET_NUM: this.bloodMatch.MATCH_SHEET_NUM,
                blood_match_type_id: item,
                blood_match_type_name: this.bloodMatchTypesObj[item]['name'],
                FIRST_RESULT: ['无凝集'],
                SECOND_RESULT: ['无凝集'],
                MATCH_RESULT: '相合',
              })
            }
          })
          return res
        } else {
          const res = []
          this.bloodMatchTypeIds.forEach((item) => {
            res.push({
              MATCH_SHEET_NUM: this.bloodMatch.match_num,
              blood_match_type_id: item,
              blood_match_type_name: this.bloodMatchTypesObj[item]['name'],
              FIRST_RESULT: ['无凝集'],
              SECOND_RESULT: ['无凝集'],
              MATCH_RESULT: '相合',
            })
          })
          return res
        }
      },
      show() {
        this.drawerVisible = true
      },
      handleChange(row) {
        if (row.FIRST_RESULT && row.FIRST_RESULT[0] === '无凝集') {
          row.MATCH_RESULT = '相合'
        }
        if (row.FIRST_RESULT && row.FIRST_RESULT[0] === '凝集') {
          row.MATCH_RESULT = '不相合'
        }
      },
    },
  }
</script>

<style lang="scss" scoped></style>
